<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="icon" type="image/png" href="../../static/favicon.ico" />

    <!-- 样式文件 -->
    <link rel="stylesheet" href="../../static/mobile/default/css/layout.css?v=2" />
    <link rel="stylesheet" href="../../static/assets/css/zpui.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/picker.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/userData.css" />

    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }

        .page-bd ul li {
            margin: .2133rem .32rem;
        }
        
        .page-bd ul li input {
            height: .5333rem;
            line-height: .5333rem;
            width: 100%;
            border: .0133rem solid #ccc;
            border-radius: .08rem;
            padding: .1333rem;
            background-color: #fff;
            color: #7c7c7c;
        }

        .page-bd ul li .work,.health{
            float: left;
            height: .5333rem;
            line-height: .5333rem;
            background-color: #dfdfdd;
            width: 50%;
            text-align: center;
            font-weight: 700;
            color: #000;
            border: .0133rem solid #ccc;
        }

        .page-bd ul li .active{
            color: #fff;
            background-color: #dd127b;
        }

        .page-bd ul li .work{
            border-top-left-radius: .08rem;
            border-bottom-left-radius: .08rem;
        }

        .page-bd ul li .health{
            border-top-right-radius: .08rem;
            border-bottom-right-radius: .08rem;
        }

        .page-bd ul li span{
            display: block;
            color: #7c7c7c;
            margin-bottom: .0667rem;
        }

        .page-bd ul .busi-type{
            height: .8rem;
        }
        
        .page-bd ul .res-channel{
            height: .8rem;
        }
        
        .page-bd ul .res-channel .channel{
            float: left;
            height: .5333rem;
            line-height: .5333rem;
            background-color: #dfdfdd;
            width: 33.33%;
            text-align: center;
            font-weight: 700;
            color: #000;
            border: .0133rem solid #ccc;
        }

        .page-bd ul .res-channel .fist{
            border-top-left-radius: .08rem;
            border-bottom-left-radius: .08rem;
        }

        .page-bd ul .res-channel .channel:last-child{
            border-top-right-radius: .08rem;
            border-bottom-right-radius: .08rem;
        }

        .page-bd ul li input,textarea {
            width: 100%;
            border: .0133rem solid #ccc;
            border-radius: .08rem;
            padding: .1333rem;
            background-color: #fff;
            color: #7c7c7c;
        }

        .page-bd ul .res-channel .active{
            color: #fff;
            background-color: #dd127b;
        }

        .res-search {
            position: relative;
        }
        
        .res-search a {
            position: absolute;
            top: .0533rem;
            right: .0533rem;
            width: .4267rem;
            height: .4267rem;
        }
        
        .res-search a img {
            width: 100%;
            height: 100%;
        }
        
        .header .header-right a img {
            width: .3733rem;
            height: .3733rem;
        }

        .lick .ck input{
            width: .3733rem;
            height: .3733rem;
            margin-right: .1733rem;
        }

        .lick .ck{
            height: 0.5rem;
            line-height: 0.5rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
    </style>

    <title>发起引荐单 - 孝邻会</title>
</head>

<body>
    <!-- 整体页面部分 -->
    <div class="page">
        <!-- 页面头部 -->
        <div class="page-hd">
            <div class="header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">发起引荐单 - 孝邻会</div>
                <div class="header-right">
                    <a href="#">
                        <img src="../../static/assets/images/res/13.png" alt="">
                    </a>
                </div>
            </div>
        </div>

        <!-- 页面内容-->
        <div class="page-bd">
            <form id="userform">
                <ul>
                    <li class="clearfix">
                        <input type="hidden" name="recomType" value="1" />
                        <a href="#" data-recomType="1" class="work active">事业</a>
                        <a href="#" data-recomType="2" class="health">健康</a>
                    </li>
                    <li class="res-search">
                        <input type="text" name="targetUserId" placeholder="接收人会员ID" />
<!--                        <a href="#"><img src="../../static/assets/images/res/14.png" alt=""></a>-->
                    </li>
<!--                    <li><input type="number" name="busiAmount" placeholder="生意金额" /></li>-->
                    <li class="res-channel" name="recomType1">
                        <span>资源渠道</span>
                        <div>
                            <input type="hidden" name="channel" value="1" />
                            <a href="#" data-channel="1" class="fist channel active">内部</a>
                            <a href="#" data-channel="2" class="channel">外部</a>
                            <a href="#" data-channel="3" class="channel">三层或以上</a>
                        </div>
                    </li>
                    <li class="res-channel" name="recomType2" style="display: none">
                        <span>与你关系</span>
                        <div>
                            <input type="hidden" name="relation" value="1" />
                            <a href="#" data-relation="1" class="work active">家人</a>
                            <a href="#" data-relation="2" class="health">朋友</a>
                        </div>
                    </li>

                    <li class="lick" name="recomType1">
                        <span>引荐方式</span>
                        <div class="ck">
                            <input type="checkbox" name="recomWay1" value="1"/>
                            <span>告诉对方你会致电他</span>
                        </div>
                        <div class="ck">
                            <input type="checkbox" name="recomWay1" value="2"/>
                            <span>将你的名片给对方</span>
                        </div>
                        <div class="ck">
                            <input type="checkbox" name="recomWay1" value="3"/>
                            <span>促成当面洽谈</span>
                        </div>
                    </li>
                    <li class="lick" name="recomType2" style="display: none">
                        <span>引荐方式</span>
                        <div class="ck">
                            <input type="checkbox" name="recomWay2" value="1"/>
                            <span>科普了亚健康的调理顺序</span>
                        </div>
                        <div class="ck">
                            <input type="checkbox" name="recomWay2" value="2"/>
                            <span>科普了疾病的由来</span>
                        </div>
                        <div class="ck">
                            <input type="checkbox" name="recomWay2" value="3"/>
                            <span>告诉了对方公司的资质与背景</span>
                        </div>
                        <div class="ck">
                            <input type="checkbox" name="recomWay2" value="4"/>
                            <span>告诉了对方排毒祛湿的好处</span>
                        </div>
                        <div class="ck">
                            <input type="checkbox" name="recomWay2" value="5"/>
                            <span>告诉了对方自身调理后的变化</span>
                        </div>
                        <div class="ck">
                            <input type="checkbox" name="recomWay2" value="6"/>
                            <span>邀请对方到自己所在分公司</span>
                        </div>
                    </li>

                    <li><input type="text" name="recomName" placeholder="姓名" /></li>
                    <li><input type="text" name="recomMobile" placeholder="电话号码" /></li>
                    <li><input type="text" name="recomWeixin" placeholder="V信号码" /></li>
                    <li name="recomType1">
                        <textarea name="addr" maxlength="100" placeholder="地址" rows="3"></textarea>
                    </li>
                    <li name="recomType2" style="display: none">
                        <textarea name="issue" maxlength="100" placeholder="亚健康问题" rows="3"></textarea>
                    </li>

                    <li>
                        <textarea name="comment" maxlength="200" placeholder="评语" rows="6"></textarea>
                    </li>
                    <li>
                        <div class="weui-btn-area">
                            <a href="javascript:;" onclick="enterpost()" class="weui-btn weui-btn_primary">提交</a>
                        </div>
                    </li>
                </ul>
            </form>
        </div>
        <!-- 版权 -->
        <div class="copyright">
            Copyright © 达漂亮<br>
        </div>

    </div>

    <!-- alert弹窗部分 -->
    <div class="alertBox">
        <div class="alertBG"></div>
        <div class="alert">
            <div class="text fs30 color_3 bor_b">

            </div>
            <!-- 单按钮 -->
            <div class="button fs32 fw_b color_r">
                知道了
            </div>
            <!-- 双按钮 -->
            <div class="buttonBox fs32 fw_b">
                <span class="color_9 bor_r cancel">取消</span>
                <span class="color_r confirm">确定</span>
            </div>
        </div>
    </div>

    <!-- 脚本文件 -->
    <script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
    <script src="../../static/assets/js/jquery-weui.min.js"></script>
    <script src="../../static/assets/js/lib/fastclick.js"></script>
    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/mobile/default/js/page.js?v=1"></script>

    <script src="../../static/mobile/default/js/datePicker.js"></script>
    <script src="../../static/mobile/default/js/picker.min.js"></script>

    <!-- 页面js部分 -->
    <script>
        //确认上传
        var enter = 0;
        function enterpost() {
            if (enter > 0) {
                $.alert('请不要重复提交');
            }
            var data = $('#userform').toJson();
            enter = 1;
            $.ajax({
                type: "post",
                url: "https://mp.jianguoes.com/api/res/addRecommend",
                contentType: "application/json",
                data: JSON.stringify(data),
                headers: {
                    token: $.cookie('code')
                },
                success: function(data) {
                    console.log(data)
                    if (data.errno != 0) {
                        $.alert(data.errmsg);
                        enter = 0;
                        return;
                    }
                    window.location.href = 'recommendlist.html';
                },
                error: function() {
                    enter = 0;
                },
            })
        }
    </script>

    <!-- 启动加载 -->
    <script>
        $(function() {
            // 解决移动端浏览器 300 毫秒点击延迟问题
            FastClick.attach(document.body);

            $("a[data-recomType]").click(function(obj){
                var val = $(this).attr("data-recomType");
                $("input[name='recomType']").val(val);
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
                if(val == 1){
                    $("li[name='recomType1']").show();
                    $("li[name='recomType2']").hide();
                }else{
                    $("li[name='recomType2']").show();
                    $("li[name='recomType1']").hide();
                }
            });


            $("a[data-channel]").click(function(obj){
                $("input[name='channel']").val($(this).attr("data-channel"));
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
            });

            $("a[data-relation]").click(function(obj){
                $("input[name='relation']").val($(this).attr("data-relation"));
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
            });



        });
    </script>
</body>

</html>